<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="增加题目" name="first">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="题目">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="题目类型">
            <el-select v-model="form.type" placeholder="请选择题目类型">
              <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否多选">
            <el-switch v-model="form.more"></el-switch>
          </el-form-item>
          <el-form-item label="增加选项">
            <el-tag :key="index" v-for="(tag,index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)">
              {{tag.inputValue}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">点击增加选项</el-button>
          </el-form-item>
          <el-form-item label="选择答案">
            <el-card class="box-card">
              <div v-if="form.more" v-for="(item,index) in dynamicTags" :key="index" class="text item">
                <el-checkbox v-model="item.checked"> {{item.inputValue}}</el-checkbox>
              </div>
              <div v-if="!form.more" v-for="(item,index) in dynamicTags" :key="index" class="text item">
                <el-radio v-model="status" :label="index"> {{item.inputValue}}</el-radio>
              </div>
            </el-card>

          </el-form-item>

          <el-form-item label="答案解析">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">增加题目</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="题目管理" name="second">
        <el-table :data="questionList" border style="width: 100%">
          <el-table-column prop="title" label="题目" width="200">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="150">
          </el-table-column>

          <el-table-column prop="description" label="解析" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteItem(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import { getQuestionList, addQuestion, deleteQuestion } from "@/api/question"
  export default {
    data() {
      return {
        questionList: [],
        status: "-1",
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        activeName: 'second',
        typeList: [{
          name: "党章党史",
          type: "rule"
        }, {
          name: "时事",
          type: "event"
        }, {
          name: "十九大",
          type: "nine"
        },  {
          name: "系列讲话",
          type: "talk"
        }],
        form: {
          title: '',
          more: false,
          type: "",
          description: ''
        },
        start: 5,
        chiceType: "rule"
      };
    },
    created() {
      let start = this.start
      let type = this.chiceType
      this.$nextTick(() => {
        getQuestionList(type, start).then((res) => {
          console.log(res)
          if (res.message == "ok") {
            this.questionList = res.questionList
          } else {
            this.$message.error('获取不到内容哦!');
          }
        }).catch(() => {
        })
      })

    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      deleteItem(id) {
        console.log(id)
        deleteQuestion(id).then((res) => {
          if (res.message == "ok") {
            this.$message.success('删除成功');
            setTimeout(function () {
              location.reload()
            }, 1000)
          }
        })
      },
      onSubmit(e) {
        var status = this.status * 1
        var form = this.form
        var dynamicTags = this.dynamicTags
        console.log(dynamicTags, form)

        if (form.title == "") {
          this.$message.error('请填写标题!');
          return
        }
        if (form.type == "") {
          this.$message.error('请选择类型!');
          return
        }
        if (dynamicTags.length <= 2) {
          this.$message.error('选项不能少于3个');
          return
        }
        if (dynamicTags.length > 4) {
          this.$message.error('选项不能多于4个');
          return
        }
        if (form.more) {
          var count = 0
          dynamicTags.forEach((item) => {
            if (item.checked) {
              count++
            }
          })
          if (count < 2) {
            this.$message.error('多选题答案不能少于2个');
            return
          }
        } else {
          if (status == -1) {
            this.$message.error('请选择答案');
            return
          } else {
            dynamicTags[status].status = 1
          }
        }
        console.log(dynamicTags, form, form.more)

        addQuestion(form, dynamicTags).then((res) => {
          console.log(res)
          if (res.message == "ok") {
            this.$message.success('添加成功');
             setTimeout(function () {
              location.reload()
            }, 1000)
          } else {
            this.$message.error('获取不到内容哦!');
          }
        }).catch(() => {
        })

      },
      edit(row) {
        console.log(row);
      },
      handleClose(index) {
        this.dynamicTags.splice(index, 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        var inputValue = this.inputValue
        var obj = {
          inputValue,
          checked: true,
          status: 0
        }
        if (inputValue) {
          this.dynamicTags.push(obj);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  };

</script>

<style>
  .container {
    position: relative;
    margin: 0 auto;
    width: 800px;
    margin-top: 60px;
  }
  
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>